import React, { Component } from 'react'
import './index.css';
import axios from 'axios';
export default class VideoList extends Component {

    state = {
        videos: []
    }
    render() {
        return (
            <div className="container">
                <button onClick={this.forward}>前进</button><br/>
                <h2>热门视频</h2>
                <hr />
                <div className="video-list row">
                    {
                        this.state.videos.map(item => {
                            return <div key={item.id} className="col-xs-3">
                                        <div vid={item.id} onClick={this.jump} className="img" style={{
                                            backgroundImage: `url(${item.cover})`
                                        }}>
                                        </div>
                                        <h5>{item.desc.substr(0, 20)}</h5>
                                    </div>
                        })
                    }
                    
                </div>
            </div>
        )
    }

    forward = () => {
        this.props.history.go(1);
    }

    //点击跳转的方法
    jump = (e) => {
        //push 跳转
        // this.props.history.push('/video/10'); //params 传参
        // this.props.history.push('/video', {   //state
        //     id: 1
        // });
        this.props.history.push('/video?id=' + e.target.getAttribute('vid')); //query 传参

    }

    async componentDidMount(){
        let {data} = await axios('http://api.xiaohigh.com:8090/douyin?_limit=12');
        // console.log(data);
        //保存到 state 中
        this.setState({
            videos: data
        })
    }
}
